<template>
  <el-button type="primary" size="small" @click="onFullscreen" style="margin-right: 20px">
    数据大屏
  </el-button>
  <el-dialog
    class="dataFullScreen"
    v-model="dialogVisible"
    fullscreen
    append-to-body
    :show-close="false"
  >
    <div
      class="dataFullScreenConter"
      :class="{ stand: isScale }"
      :style="isScale ? `transform: scaleX(${scaleX}) scaleY(${scaleY})` : ''"
      ref="fullscreenRef"
    >
      <div class="heder_box">
        <div class="fullTitle">
          <img src="../../assets/image/fullscreen/title.png" />
        </div>
        <div class="dateback between">
          <div class="date" v-if="info && info.weather">
            <img :src="info.weather.icon" />
            <span style="margin-left: 10px">{{ info.weather.WeatherDescription.description }}</span>
            <span style="margin-left: 10px">{{ info.weather.Temperature.temp }}℃</span>
            <span style="margin-left: 40px">{{ dateInfo.yymmdd }}</span>
            <span style="margin-left: 12px">{{ dateInfo.week }}</span>
            <span style="margin-left: 12px">{{ dateInfo.hhmmss }}</span>
          </div>
          <div v-else></div>
          <div class="flex-align-center">
            <div class="updateTime" v-if="info && info.updatetime"
              >更新时间：{{ info.updatetime }}</div
            >
            <div class="back" @click="onBack">
              返回控制台<img src="../../assets/image/fullscreen/back.png" />
            </div>
          </div>
        </div>
      </div>
      <div class="screenContent">
        <el-row class="elRow" :gutter="20">
          <el-col class="elCol" :span="6">
            <div class="cardTitle">设备状态</div>
            <div class="cardBorder">
              <div class="cardCont">
                <div class="statusBox">
                  <div class="status">
                    <div class="img">
                      <img src="../../assets/image/fullscreen/status1.png" />
                    </div>
                    <div>在线</div>
                  </div>
                  <div class="number" v-if="info && info.online">{{ info.online }}</div>
                  <div class="number" v-else>0</div>
                </div>
                <div class="statusBox">
                  <div class="status">
                    <div class="img">
                      <img src="../../assets/image/fullscreen/status2.png" />
                    </div>
                    <div>离线</div>
                  </div>
                  <div class="number" v-if="info && info.offline">{{ info.offline }}</div>
                  <div class="number" v-else>0</div>
                </div>
                <div class="statusBox">
                  <div class="status">
                    <div class="img">
                      <img src="../../assets/image/fullscreen/status3.png" />
                    </div>
                    <div>打开</div>
                  </div>
                  <div class="number" v-if="info && info.open">{{ info.open }}</div>
                  <div class="number" v-else>0</div>
                </div>
                <div class="statusBox">
                  <div class="status">
                    <div class="img">
                      <img src="../../assets/image/fullscreen/status4.png" />
                    </div>
                    <div>关闭</div>
                  </div>
                  <div class="number" v-if="info && info.close">{{ info.close }}</div>
                  <div class="number" v-else>0</div>
                </div>
              </div>
            </div>
            <div class="cardTitle" style="margin-top: 20px">房间数量</div>
            <div class="cardBorder" style="height: 0; flex: 1">
              <div class="cardCont">
                <el-scrollbar class="room_scrollbar" height="100%">
                  <div class="room_list" v-if="info && info.department">
                    <div class="roomCard" :class="{ suc: item.on }" v-for="item in info.department">
                      <div class="roomName">
                        <span>{{ item.name }}</span>
                      </div>
                      <div class="roomNum">
                        <span>{{ item.on }}</span> / {{ item.all }}
                      </div>
                    </div>
                    <div class="roomCard" style="height: 0"></div>
                  </div>
                </el-scrollbar>
              </div>
            </div>
          </el-col>
          <el-col class="elCol" :span="12">
            <div class="fullcenter">
              <div class="centerImg" style="height: 0; flex: 1">
                <img src="../../assets/image/fullscreen/centerImg.png" />
                <div class="hospname" v-if="info && info.platform">{{ info.platform }}</div>
              </div>
              <div class="cenbom">
                <div class="cardTitle bg2">
                  <span>在线时长 </span>
                  <div class="monthSelBox">
                    <div class="month" :class="{ selOn: type == 1 }" @click="handleType(1)"
                      >上月</div
                    >
                    <div class="month" :class="{ selOn: type == 0 }" @click="handleType(0)"
                      >本月</div
                    >
                  </div>
                </div>
                <div class="cardBorder">
                  <div class="cardCont">
                    <div class="chartBox">
                      <vChartLine ref="chartLineRef" width="100%" height="100%" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col class="elCol" :span="6">
            <div class="cardTitle">当前预警</div>
            <div class="cardBorder" style="height: 0; flex: 1">
              <div class="cardCont">
                <div class="warnTable">
                  <div class="table_header">
                    <div class="table_title">预警标题</div>
                    <div class="table_content">预警原因</div>
                    <div class="table_date">时间</div>
                  </div>
                  <!-- <el-scrollbar class="table_scrollbar" ref="warnTableRef"> -->
                  <div class="table_scrollbar" ref="warnTableRef">
                    <template v-if="warnData && warnData.length">
                      <div
                        class="table_row"
                        :class="{ opacity0: index >= warnIndex }"
                        ref="warnRowRef"
                        v-for="(item, index) in warnData"
                        :key="index"
                      >
                        <div class="table_title">{{ item.title }}</div>
                        <div class="table_content">{{ item.content }}</div>
                        <div class="table_date">{{ item.create_time }}</div>
                      </div>
                    </template>
                    <div class="emptyText" v-else>暂无数据</div>
                  </div>
                  <!-- </el-scrollbar> -->
                </div>
              </div>
            </div>
            <div class="cardTitle" style="margin-top: 20px">科室数量</div>
            <div class="cardBorder">
              <div class="cardCont">
                <div class="deptBox">
                  <img src="../../assets/image/fullscreen/dept.png" />
                  <div class="deptNum">
                    <div v-if="info && info.departmentNum">
                      <span>{{ info.departmentNum }}</span> 科
                    </div>
                    <div v-else><span>0</span> 科</div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
  import vChartLine from './ChartLine.vue'
  import { baseData, logList, dataEcharts } from '@/api/admin'
  import { nextTick, onMounted, ref } from 'vue'
  const dialogVisible = ref(false)
  const chartLineRef = ref()
  const fullscreenRef = ref()
  const warnData = ref()
  const dateInfo = ref({
    yymmdd: '',
    week: '',
    hhmmss: '',
  })
  const info = ref()
  const type = ref(0)
  const chartPage = ref(1)
  const warnIndex = ref(0)
  const getBaseData = () => {
    baseData({}).then((res: any) => {
      if (res.code == 200) {
        info.value = res.data
      }
    })
  }
  const getLogList = () => {
    logList({
      page: 1,
      limit: 10,
    }).then((res: any) => {
      if (res.code == 200) {
        warnData.value = res.data.data
        setTimeout(() => {
          warnShow()
        }, 100)
      }
    })
  }
  const warnTableRef = ref()
  const warnRowRef = ref()
  const warnShow = () => {
    nextTick(() => {
      let fHight = 0
      if (warnTableRef.value) fHight = warnTableRef.value.clientHeight
      if (fHight > 0 && warnRowRef.value) {
        try {
          let height = 0
          warnRowRef.value.forEach((item, index) => {
            height += item.clientHeight
            if (height >= fHight) {
              warnIndex.value = index
              throw new Error('结束循环')
            }
          })
        } catch (err) {}
      }
    })
  }
  const chartLoading = ref(false)
  const getDataEcharts = () => {
    if (chartLoading.value) return
    chartLoading.value = true
    dataEcharts({
      type: type.value,
      page: chartPage.value,
      limit: 5,
    }).then((res: any) => {
      if (res.code == 200) {
        nextTick(() => {
          chartLineRef.value.initChart(res.data)
          chartLoading.value = false
        })
        if (chartPage.value * 5 >= res.data.count) chartPage.value = 1
        else chartPage.value++
      }
    })
  }
  const handleType = (val: number) => {
    if (type.value == val) return
    type.value = val
    getDataEcharts()
  }
  const getDate = () => {
    const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
    let date = new Date()
    let YYYY = date.getFullYear()
    let MM: any = date.getMonth() + 1
    MM = MM < 10 ? `0${MM}` : MM
    let DD: any = date.getDate()
    DD = DD < 10 ? `0${DD}` : DD
    let hh: any = date.getHours()
    hh = hh < 10 ? `0${hh}` : hh
    let mm: any = date.getMinutes()
    mm = mm < 10 ? `0${mm}` : mm
    let ss: any = date.getSeconds()
    ss = ss < 10 ? `0${ss}` : ss
    let day = date.getDay()
    dateInfo.value.yymmdd = `${YYYY}-${MM}-${DD}`
    dateInfo.value.hhmmss = `${hh}:${mm}:${ss}`
    dateInfo.value.week = weekdays[day]
  }
  const time1 = ref(0)
  const time2 = ref(0)
  const interval = ref()
  const onFullscreen = () => {
    dialogVisible.value = true
    document.documentElement.requestFullscreen().then(() => {
      handleScale()
    })
    getDate()
    getBaseData()
    getLogList()
    getDataEcharts()
    if (interval.value) {
      clearInterval(interval.value)
      interval.value = null
    }
    interval.value = setInterval(() => {
      getDate()
      time1.value++
      time2.value++
      if (time1.value >= 180) {
        time1.value = 0
        getBaseData()
        getLogList()
      }
      if (time2.value >= 15) {
        time2.value = 0
        getDataEcharts()
      }
    }, 1000)
  }
  const onBack = () => {
    document.exitFullscreen()
    dialogVisible.value = false
    if (interval.value) {
      clearInterval(interval.value)
      interval.value = null
    }
  }
  const scaleX = ref(1)
  const scaleY = ref(1)
  const isScale = ref(false)
  const handleScale = () => {
    let screenWidth = fullscreenRef.value.clientWidth
    let screenHeight = fullscreenRef.value.clientHeight
    if (screenWidth <= 1280 && screenHeight <= 720) {
      isScale.value = true
      scaleX.value = screenWidth.value / 1920
      scaleY.value = screenHeight.value / 1080
    } else isScale.value = false
  }
  onMounted(() => {})
</script>

<style lang="scss">
  .dataFullScreen {
    background-color: #021424;
    .el-dialog__header {
      padding: 0;
    }
    .el-dialog__body {
      width: 100vw;
      height: 100vh;
      padding: 0;
      background: url('../../assets/image/fullscreen/bg.png') no-repeat center bottom;
      background-size: cover;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .flex-align-center {
      display: flex;
      align-items: center;
    }
    .between {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .dataFullScreenConter {
      width: 100vw;
      height: 100vh;
      .heder_box {
        position: relative;
        height: 70px;
        background: url('../../assets/image/fullscreen/titlebg1.png') no-repeat center bottom;
        background-size: auto 100%;
        .fullTitle {
          padding-top: 12px;
          text-align: center;
        }

        .dateback {
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 40px;
          box-sizing: border-box;
          padding: 0 40px;
          .date {
            display: flex;
            align-items: center;
            font-family: Alibaba PuHuiTi 2;
            font-weight: normal;
            font-size: 16px;
            color: #ffffff;
            img {
              width: 30px;
              height: 30px;
            }
          }

          .back {
            display: flex;
            align-items: center;
            font-family: Alibaba PuHuiTi 2;
            font-weight: normal;
            font-size: 18px;
            color: #59a4f0;
            cursor: pointer;
            img {
              margin-left: 10px;
              width: 25px;
            }
          }
          .updateTime {
            margin-right: 40px;
            font-family: Alibaba PuHuiTi 2;
            font-weight: normal;
            font-size: 14px;
            color: #59a4f0;
          }
        }
      }
      .screenContent {
        height: calc(100vh - 70px);
        box-sizing: border-box;
        padding: 30px;
        .elRow {
          height: 100%;
        }
        .elCol {
          position: relative;
          height: 100%;
          display: flex;
          flex-direction: column;
          .fullcenter {
            height: 100%;
            display: flex;
            flex-direction: column;
          }
          .cenbom {
          }
        }
      }

      .cardTitle {
        height: 40px;
        background: url('../../assets/image/fullscreen/titlebg.png') no-repeat;
        background-size: 100% 100%;

        box-sizing: border-box;
        padding: 0 16px;
        display: flex;
        align-items: center;

        font-weight: normal;
        font-size: 16px;
        color: #f5faff;
        line-height: 16px;

        &::before {
          content: '';
          margin-right: 4px;
          width: 14px;
          height: 14px;
          background: linear-gradient(90deg, #59a4f0 0%, rgba(89, 164, 240, 0) 100%);
          border-radius: 0px 0px 0px 7px;
        }
      }
      .bg2 {
        background: url('../../assets/image/fullscreen/titlebg2.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .monthSelBox {
          flex: 1;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          .month {
            position: relative;
            margin-right: 20px;
            width: 42px;
            height: 16px;
            text-align: center;
            font-family: Alibaba PuHuiTi 2;
            font-weight: normal;
            font-size: 16px;
            color: #59a4f0;
            opacity: 0.5;
            cursor: pointer;
            &::before {
              content: '';
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              height: 6px;
              background: linear-gradient(
                90deg,
                rgba(89, 164, 240, 0.5) 0%,
                rgba(89, 164, 240, 0) 100%
              );
              border-radius: 0px 0px 0px 6px;
            }
          }
          .selOn {
            color: #f5faff;
            opacity: 1;
            &::before {
              background: linear-gradient(90deg, #59a4f0 0%, rgba(89, 164, 240, 0) 100%);
            }
          }
        }
      }

      .cardBorder {
        position: relative;

        &::before {
          content: '';
          position: absolute;
          z-index: 2;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          background: linear-gradient(0deg, #59a4f0, rgba(89, 164, 240, 0));
          border-radius: 0 0 10px 10px;
          box-sizing: border-box;
          padding: 1px;

          /* 随便定义一个颜色 */
          --mask-bg: linear-gradient(red, red);
          --mask-clip: content-box, padding-box;
          -webkit-mask-image: var(--mask-bg), var(--mask-bg);
          -webkit-mask-clip: var(--mask-clip);
          /* exclude排除，只显示不重合的地方,Firefox支持4个属性 */
          mask-composite: exclude;
          /* 只显示下方遮罩，重合的地方不显示 */
          -webkit-mask-composite: destination-out;
        }
        .cardCont {
          position: relative;
          z-index: 4;
          height: 100%;
          background: linear-gradient(0deg, rgba(89, 164, 240, 0.2) 0%, rgba(89, 164, 240, 0) 100%);
          border-radius: 10px;
          box-sizing: border-box;
          padding: 20px;
          display: flex;
          flex-wrap: wrap;
          align-content: flex-start;
          justify-content: space-between;

          .statusBox {
            margin-top: 20px;
            margin-right: 20px;
            width: calc((100% - 20px) / 2);
            height: 105px;
            background: linear-gradient(
              90deg,
              rgba(89, 164, 240, 0.2) 0%,
              rgba(89, 164, 240, 0) 100%
            );
            border-radius: 4px;
            box-sizing: border-box;
            padding: 0 20px;

            display: flex;
            align-items: center;

            &:first-child,
            &:nth-child(2) {
              margin-top: 0;
            }
            &:nth-child(2n) {
              margin-right: 0;
            }
            .status {
              margin-right: 20px;
              flex-shrink: 0;
              font-family: Alibaba PuHuiTi 2;
              font-weight: normal;
              font-size: 16px;
              color: #ffffff;
              line-height: 36px;
              text-align: center;
              .img {
                width: 50px;
                height: 50px;
                padding-top: 4px;
                background: linear-gradient(
                  0deg,
                  #59a4f0 0%,
                  rgba(89, 164, 240, 0) 50%,
                  rgba(89, 164, 240, 0) 100%
                );
                border-radius: 50%;
                img {
                  width: 33px;
                }
              }
            }
            .number {
              flex: 1;
              text-align: center;
              font-family: Alibaba PuHuiTi 2;
              font-weight: normal;
              font-size: 48px;
              color: #bfdfff;
            }
          }
          .room_scrollbar {
            width: calc(100% + 15px);
            height: 100%;
            margin-right: -15px;
            .room_list {
              box-sizing: border-box;
              padding-right: 15px;
              display: flex;
              flex-wrap: wrap;
              align-content: flex-start;
              justify-content: space-between;
            }
          }
          .roomCard {
            margin-top: 20px;
            width: calc((100% - 60px) / 3);
            text-align: center;
            &:first-child,
            &:nth-child(2),
            &:nth-child(3) {
              margin-top: 0;
            }
            .roomName {
              position: relative;
              height: 24px;
              font-family: Alibaba PuHuiTi 2;
              font-weight: normal;
              font-size: 16px;
              color: #ffffff;
              text-align: center;
              white-space: nowrap;
              &::before {
                content: '';
                position: absolute;
                z-index: 3;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 14px;
                background: linear-gradient(90deg, #59a4f0 0%, rgba(89, 164, 240, 0) 100%);
                border-radius: 0px 0px 0px 7px;
              }
              span {
                position: relative;
                z-index: 4;
              }
            }
            .roomNum {
              height: 50px;
              line-height: 50px;
              background: linear-gradient(
                0deg,
                rgba(89, 164, 240, 0.2) 0%,
                rgba(89, 164, 240, 0) 100%
              );
              border-radius: 0px 0px 7px 7px;
              box-sizing: border-box;
              font-family: Alibaba PuHuiTi 2;
              font-weight: normal;
              font-size: 16px;
              color: #bfdfff;
              span {
                font-size: 32px;
              }
            }
          }
          .suc {
            .roomName {
              &::before {
                background: linear-gradient(90deg, #45fff9 0%, rgba(69, 255, 249, 0) 100%);
              }
            }
            .roomNum {
              background: linear-gradient(
                0deg,
                rgba(69, 255, 249, 0.2) 0%,
                rgba(69, 255, 249, 0) 100%
              );
              span {
                color: #fdbd00;
              }
            }
          }
          .deptBox {
            position: relative;
            width: 100%;
            height: 190px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            img {
              height: 100%;
            }

            .deptNum {
              position: absolute;
              right: 20px;
              top: 10px;
              bottom: 10px;
              width: 66%;
              background: linear-gradient(
                -90deg,
                rgba(89, 164, 240, 0.5) 0%,
                rgba(89, 164, 240, 0) 100%
              );
              border-radius: 10px;
              box-sizing: border-box;
              padding-right: 32px;
              display: flex;
              align-items: center;
              justify-content: flex-end;
              font-family: Alibaba PuHuiTi 2;
              font-weight: normal;
              font-size: 16px;
              color: #bfdfff;
              span {
                font-size: 80px;
              }
            }
          }

          .warnTable {
            margin: 0 -10px;
            width: calc(100% + 20px);
            height: 100%;
            .table_header {
              width: 100%;
              height: 40px;
              display: flex;
              align-items: center;
              background-color: rgba(89, 164, 240, 0.2);
              font-family: Alibaba PuHuiTi 2;
              font-weight: normal;
              font-size: 14px;
              color: #59a4f0;
            }
            .table_title,
            .table_date {
              width: 30%;
              box-sizing: border-box;
              padding: 8px 12px;
            }
            .table_content {
              width: 40%;
              box-sizing: border-box;
              padding: 8px 12px;
            }
            .table_scrollbar {
              height: calc(100% - 40px);
              .table_row {
                display: flex;
                align-items: center;
                font-family: Alibaba PuHuiTi 2;
                font-weight: normal;
                font-size: 14px;
                color: #ffffff;
                line-height: 1.5em;
                &:nth-child(2n) {
                  background-color: rgba(89, 164, 240, 0.2);
                }
              }
              .opacity0 {
                opacity: 0;
              }
            }
          }

          .chartBox {
            width: 100%;
            height: 230px;
          }
        }
      }

      .centerImg {
        position: relative;
        padding-top: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 100%;
          height: auto;
          max-height: 120%;
        }
        .hospname {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 12%;
          text-align: center;
          font-family: Alibaba PuHuiTi 2;
          font-weight: bold;
          font-size: 50px;
          color: #ffffff;
          // text-shadow: 0px 4px 9px rgba(12, 44, 82, 0.6);
          background: linear-gradient(0deg, #ffffff 0%, #aadcff 100%);
          -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
          -webkit-text-fill-color: transparent; /*给文字设置成透明*/
        }
      }

      .emptyText {
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #59a4f0;
      }
    }
    .stand {
      flex-shrink: 0;
      width: 1920px;
      height: 1080px;
      .screenContent {
        height: 1010px;
      }
    }
  }
</style>

​
